<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .mask {
            width: 300px;
            height: 300px;
            border: 1px solid green;
        }
        .spans {
            margin-left: 30px;
        }
        .active {
            color: red;
        }



    </style>
</head>

<body>
    <div id="app">
        <button @keyup.esc="aaa">11111111111111111111111111</button>
         <div v-if="brr">
             <span v-for="(item, index) in brr" :key="index"><b>{{item}}</b><i @click="del(index)">X</i></span>
         </div>
         <button @click="addfn">添加标签</button>
         <div v-show="flag" class="mask">
             <span v-for="(item, index) in arr" :key="index" class="spans" @click="spanclick(index)" :style="{color:(index==activeindex?'red':'')}">{{item.tit}}</span>
             <div v-for="(item, index) in arr[activeindex].con" :key="index">
                 <span @click="spansfn(item)">{{item}}</span>
             </div>
         </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!',
                flag:false,
                arr:[
                    {
                        tit:"前端",
                        con:[
                            "html","css","js"
                        ]
                    },
                    {
                        tit:"后端",
                        con:[
                            "java","php","python"
                        ]
                    },
                    {
                        tit:"数据库",
                        con:[
                            "mysql","sql server"
                        ]
                    }
                ],
                activeindex:0,
                brr:[]
            },
            methods: {
                aaa(){
                    alert(1)
                },
                addfn() {
                   this.flag = true
                },
                spanclick(index) {
                    this.activeindex = index
                },
                spansfn(item) {
                    console.log(item)
                    if (this.brr.length >= 5) {
                        alert("不能在加了")
                    } else {
                        this.brr.push(item)
                    }
                   
                },
                del(index){
                    this.brr.splice(index,1)
                }
            },
        })
    </script>
</body>

</html>